<template>
	<view class="page">
		<navigation class="header_navigation" barColor="#333333" textColor="#333333" defaultButton="back">社区新闻</navigation>
		<scroll-view scroll-y="true" class="page_scroll" scroll-with-animation="true" enable-back-to-top="true" @scrolltolower="scrollBottom">
			<view class="scroll_panel">
				<informationTemplate :list="dataList"></informationTemplate>
				<view class="no-data">
					<view class="more"><uni-load-more :status="moreStatus" :content-text="moreContentText" iconType="spinner" color="#666666"></uni-load-more></view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import * as modelApi from '@/api/userApi/model.js';
export default {
	data() {
		return {
			dataList: [],
			// more
			moreStatus: 'more',
			moreContentText: {
				// 加载各状态文字说明。
				contentdown: '加载更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多了'
			},
			searchModel: {
				current: 1, 
				size: 10
			}
		};
	},
	onShow() {
		this.getList();
	},
	methods: {
		getList() {
			this.moreStatus = 'loading';
			modelApi
				.queryNews(this.searchModel)
				.then(res => {
					if (res.code === 0) {
						if (this.searchModel.current == 1) {
							this.dataList = [];
						}
						if (res.data && res.data.length == 10) {
							this.moreStatus = 'more';
							this.searchModel.current += 1;
							this.dataList = [...this.dataList, ...res.data];
						} else if (res.data && res.data.length < 10) {
							this.moreStatus = 'noMore';
							this.searchModel.current += 1;
							this.dataList = [...this.dataList, ...res.data];
						} else {
							this.moreStatus = 'noMore';
						}
					}
				})
				.catch(e => {
					this.moreStatus = 'noMore';
					uni.showToast({
						title: e.msg,
						icon: 'none',
						duration: 1000
					});
				});
		},
		// 滑动到底部。分页处理
		scrollBottom() {
			this.getList();
		}, 
	}
};
</script>

<style lang="stylus">
.page_scroll
	position absolute
	top calc(120rpx + var(--status-bar-height))
	right 0rpx
	bottom 0rpx
	left 0rpx
.scroll_panel
	padding 0rpx 30rpx
	box-sizing border-box
</style>
